<template>
  <div class="app-container">
    <el-form label-position="top" size="medium">
      <!-- 网站信息 -->
      <h2>网站信息设置</h2>

      <!-- 网站标题 -->
      <el-form-item label="网站标题" style="width:500px;">
        <el-input max-length="12" disabled placeholder="未填写网站标题" v-model="form.siteTitle">
        </el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱" style="width:500px;">
        <el-input disabled placeholder="未填写邮箱地址" v-model="form.mail">
        </el-input>
      </el-form-item>

      <!-- 备案号 -->
      <el-form-item label="备案号" style="width:500px;">
        <el-input disabled placeholder="未填写备案号地址" v-model="form.icp">
        </el-input>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 博客网站头像信息 -->
      <el-form-item class="upload">
        <h2>博客网站头像信息</h2>
        <el-image style=" width:100px;height:100px;" :src="form.avatar" fit="contain"></el-image>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 网站图标信息 -->
      <el-form-item>
        <h2>网站图标信息</h2>
        <!-- 网站图标地址 -->
        <el-form-item label="网站图标地址" style="width:500px;">
          <el-input disabled placeholder="未填写网站图标地址" v-model="form.favicon">
          </el-input>
        </el-form-item>
        <!-- 网址图标预览 -->
        <el-form-item label="网址图标预览">
          <el-image style="width:50px;height:50px;" :src="form.favicon" fit="contain"></el-image>
        </el-form-item>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- github信息 -->
      <h2>GitHub 信息</h2>
      <!-- GitHub 名字 -->
      <el-form-item label="GitHub 名字" style="width:500px;">
        <el-input disabled placeholder="未填写GitHub 名字" v-model="form.githubName">
        </el-input>
      </el-form-item>

      <!-- GitHub 地址 -->
      <el-form-item label="GitHub 地址" style="width:500px;">
        <el-input disabled placeholder="未填写GitHub 地址" v-model="form.github">
        </el-input>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- QQ信息 -->
      <h2>QQ 信息</h2>
      <!-- QQ 号码 -->
      <el-form-item label="QQ 号码" style="width:500px;">
        <el-input disabled placeholder="未填写QQ 号码" v-model="form.qq">
        </el-input>
        <!-- QQ二维码图片预览 -->
        <el-form-item label="QQ二维码图片预览">
          <el-image style="width:100px;height:100px;" :src="form.qqQrCode" fit="contain"></el-image>
        </el-form-item>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 微信信息 -->
      <h2>微信号</h2>
      <!-- 微信号 -->
      <el-form-item label="微信号" style="width:500px;">
        <el-input disabled placeholder="未填写微信号" v-model="form.weixin">
        </el-input>
        <!-- 微信二维码图片预览 -->
        <el-form-item label="微信二维码图片预览">
          <el-image style=" width:100px; height:100px;" :src="form.weixinQrCode" fit="contain"></el-image>
        </el-form-item>
      </el-form-item>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 进入编辑模式 -->
      <el-button type="primary" plain @click="btn_isEdit_Handle">进入编辑模式</el-button>


      <!-- 打开form表单【进入编辑后的信息】 -->
      <el-dialog fullscreen title="请编辑信息" :visible.sync="dialogFormVisible">
        <el-form :model="form2">
          <!-- 网站标题 -->
          <el-form-item label="网站标题">
            <el-input v-model="form2.siteTitle" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 邮箱 -->
          <el-form-item label="邮箱">
            <el-input v-model="form2.mail" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 备案号 -->
          <el-form-item label="备案号">
            <el-input v-model="form2.icp" autocomplete="off"></el-input>
          </el-form-item>

          <!-- 博客网站头像地址 -->
          <el-form-item label="博客网站头像（点击更换）">
            <upLoad v-model="form2.avatar" />
          </el-form-item>

          <!-- 网站图标地址 -->
          <el-form-item label="网站图标地址">
            <el-input v-model="form2.favicon" autocomplete="off"></el-input>
          </el-form-item>

          <!-- github 名字 -->
          <el-form-item label="GitHub 名字">
            <el-input v-model="form2.githubName" autocomplete="off"></el-input>
          </el-form-item>

          <!-- github 地址 -->
          <el-form-item label="GitHub 地址">
            <el-input v-model="form2.github" autocomplete="off"></el-input>
          </el-form-item>

          <!-- QQ 号码 -->
          <el-form-item label="QQ 号码">
            <el-input v-model="form2.qq" autocomplete="off"></el-input>
          </el-form-item>
          <!-- QQ二维码图片地址 -->
          <el-form-item label="QQ二维码图片地址 👇（点击更换）">
            <upLoad v-model="form2.qqQrCode" />
          </el-form-item>

          <!-- 微信号 -->
          <el-form-item label="微信号">
            <el-input v-model="form2.weixin" autocomplete="off"></el-input>
          </el-form-item>
          <!-- 微信二维码图片地址 -->
          <el-form-item label="微信二维码图片地址 👇（点击更换）">
            <upLoad v-model="form2.weixinQrCode" />
          </el-form-item>
        </el-form>

        <!-- 确定取消 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSettingInfo_Handle">确 定</el-button>
        </div>
      </el-dialog>


    </el-form>
  </div>
</template>

<script>
import * as globalSetting_API from "@/api/setting"
import { URL_CONFIG } from "@/urlConfig"
import upLoad from "@/components/UpLoad"
export default {
  data() {
    return {
      dialogFormVisible: false,//进入编辑 信息
      form: {
        siteTitle: '', //网站标题
        mail: '',//邮箱
        icp: '',//备案号
        id: '',//ID
        favicon: '',//网站图标地址
        avatar: '',//网站头像地址
        githubName: '',//github名字
        github: '',//github地址
        qq: '',//QQ号码
        qqQrCode: '',//QQ二维码图片预览
        weixin: '',//微信号码
        weixinQrCode: '',//微信二维码图片预览
      },
      // 【打开后用的】
      form2: {
        siteTitle: '', //网站标题
        mail: '',//邮箱
        icp: '',//备案号
        id: '',//ID
        favicon: '',//网站图标地址
        avatar: '',//网站头像地址
        githubName: '',//github名字
        github: '',//github地址
        qq: '',//QQ号码
        qqQrCode: '',//QQ二维码图片预览
        weixin: '',//微信号码
        weixinQrCode: '',//微信二维码图片预览
      }
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    upLoad
  },
  methods: {
    async fetchData() {
      const { data } = await globalSetting_API.getGlobalSetting()
      this.form = data
      // this.form.avatar2 = URL_CONFIG + data.avatar
      // this.form.qqQrCode2 = URL_CONFIG + data.qqQrCode
      // this.form.weixinQrCode2 = URL_CONFIG + data.weixinQrCode

      this.form2 = this.form
      console.log(this.form, '开始拿到this.data的数据');
    },

    // 【进入编辑】
    btn_isEdit_Handle() {
      console.log('【进入编辑】', this.dialogFormVisible);

      this.dialogFormVisible = true

    },
    // 【修改设置信息】
    async editSettingInfo_Handle() {
      console.log('【已修改设置信息】', this.form2);
      await globalSetting_API.putGlobalSetting(this.form2)
      this.fetchData()
      this.dialogFormVisible = false
      this.$message.success('修改成功')
    }
  }
}
</script>

<style scoped></style>
